<template>
    <view class="home-page">
        <!-- 循环渲染店铺列表 -->
   <view v-for="(shop, index) in shopList" :key="index" class="shop-item" @click="goToDetail(shop.id)">
    <image :src="shop.imgUrl" style="width: 50px; height: 50px;"></image>
    <view class="shop-info">
        <view>{{shop.name}}</view>
        <text>月售: {{shop.sales}}</text>
        <text>起送: {{shop.expressLimit}}</text>
        <text>基础运费: {{shop.expressPrice}}</text>
        <view class="a">{{shop.slogan}}</view>
    </view>
</view>
    </view>
</template>

<script>
import config from '../config.js';
export default {
    data() {
        return {
            title: 'Hello',
            shopList: []
        };
    },
    
    onShow() {
        uni.request({
            url: config.api_host+'/data', 
            method: 'GET',
            success: (res) => {
                if (res.statusCode === 200) {
                    this.shopList = res.data;
                }
            },
            fail: (err) => {
                console.log('请求失败', err);
            }
        });
    },
    methods: {
        more(id) {
            // 这里可以实现跳转到详情页的逻辑，暂时先简单打印id
            console.log('要跳转的店铺id:', id);
            uni.navigateTo({
                url: `/pages/more/more?id=${id}` 
            });
        }
    }
};
</script>

<style scoped>
.a{
    color: red;
}

/* 店铺列表项整体样式 */
.shop-item {
    display: flex;
    align-items: center;
    margin: 15px 0;
    padding: 10px;
    border-bottom: 1px solid #e0e0e0;
}
/* 图片样式 */
.shop-item image {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}
/* 店铺信息容器样式 */
.shop-info {
    flex: 1;
}
.shop-item view {
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
}
.shop-item text {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}
</style>